<template lang="pug">
.pdf-view(:style="style" :class="{allFullScreen:style.width}")
    .allFull(title="全屏" @click="allFull()" v-if="allFullScreen")
        el-icon(size="16")
            FullScreen
    .close(v-if="showClose" @click="close()")
        el-icon(size="16")
            CloseBold
    VuePdfApp(
        :page-scale="pageScale"
        :theme="theme"
        :style="{ width: viewerWidth, height: viewerHeight }"
        :pdf="src"
        :fileName="fileName"
        @pages-rendered="pagesRendered"
        @open="openHandler"
        @after-created="afterCreated"
        v-bind="$attrs"
        :config="config"
        :page-number="1"
        :key="'VuePdfApp'+Math.floor(Math.random()*100)"
    )
</template>

<script setup>
import VuePdfApp from 'vue3-pdf-app'
import 'vue3-pdf-app/dist/icons/main.css'
import { ref, onMounted, computed } from 'vue'
import dialogModel from '@/components/dialogModel.vue'
import formModel from '@/components/formModel.vue'
import apis from '@/apis'
import { success } from '@/utils/message'
import { watch } from 'less'
const props = defineProps({
    allFullScreen: {
        type: Boolean,
        default: true
    },
    showClose: {
        type: Boolean,
        default: false
    },
    src: {
        type: String,
        default: ''
    },
    pageScale: {
        type: Number,
        default: 100
    }, // 默认自适应展示一页
    theme: {
        type: String,
        default: 'white'
    },
    viewerWidth: {
        type: String,
        default: '100%'
    },
    viewerHeight: {
        type: String,
        default: '100%'
    },
    fileName: {
        type: String,
        default: ''
    }
})
const close = () => {
    emit('close')
}
const emit = defineEmits(['close', 'loaded'])
//定位
const searchLocation = (str) => {
    $('#findInput')[0].value = str
    $('#findPrevious')[0].click()

    setTimeout(()=>{
        if($('#findResultsCount')[0].textContent == ''){//没搜到，去空格再搜一次
            $('#findInput')[0].value = str.replace(/(<\/?b>|\\t|\s)/g, '')
            $('#findPrevious')[0].click()
        }
    }, 50)
}
const afterCreated = () =>{

}
const openHandler = (pdfApp) => {
    debugger
}
//加载出来
const pagesRendered = (pdfApp) => {
    // searchLocation('核实平均负载率指标和10kV重过载比例')
    setTimeout(() => {
        document.querySelector('#pageAutoOption').textContent = '自适应尺寸'
        document.querySelector('#firstPage span').textContent = '转到第一页'
        document.querySelector('#lastPage span').textContent = '转到最后一页'
        document.querySelector('#pageRotateCw span').textContent = '顺时针旋转'
        document.querySelector('#pageRotateCcw span').textContent = '逆时针旋转'
        document.querySelector('#cursorHandTool span').textContent = '手形工具'
    }, 0)
    emit('loaded', pdfApp)
}
//全屏
const style = ref({})
const allFull = () => {
    if(style.value.width){
        style.value = {}
    }else{
        style.value = {
            position: 'fixed',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            zIndex: 999999
        }
    }
}

const config = ref({
    sidebar: {
        viewThumbnail: true,
        viewOutline: true,
        viewAttachments: false
    },
    secondaryToolbar: {
        secondaryPresentationMode: true,
        secondaryOpenFile: true,
        secondaryPrint: true,
        secondaryDownload: true,
        secondaryViewBookmark: true,
        firstPage: true,
        lastPage: true,
        pageRotateCw: true,
        pageRotateCcw: true,
        cursorSelectTool: true,
        cursorHandTool: true,
        scrollVertical: true,
        scrollHorizontal: true,
        scrollWrapped: true,
        spreadNone: true,
        spreadOdd: true,
        spreadEven: true,
        documentProperties: true
    },
    toolbar: {
        toolbarViewerLeft: {
            findbar: true,
            previous: true,
            next: true,
            pageNumber: true
        },
        toolbarViewerRight: {
            presentationMode: false,
            openFile: false,
            print: false,
            download: false,
            viewBookmark: false
        },
        toolbarViewerMiddle: {
            zoomOut: true,
            zoomIn: true,
            scaleSelectContainer: true
        }
    },
    errorWrapper: true
})
onMounted(() => {
    //ESC退出全屏
    // document.onkeydown = (e) => {
    //     if(e.keyCode == 27){
    //         style.value = {}
    //     }
    // }
})
defineExpose({
    searchLocation,
    allFull
    // open
})

</script>

<style lang="less" scoped>
.pdf-view{
    height: 100%;
    width: 100%;
    position: relative;
    background: #fff;
    .close{
        position: absolute;
        top: 6px;
        right: 5px;
        z-index: 2001;
        cursor: pointer;
    }
    .allFull{
        position: absolute;
        top: 6px;
        right: 100px;
        z-index: 2001;
        cursor: pointer;
    }
    &.allFullScreen{
        :deep(#sidebarResizer){//
            display: block;
        }
    }
}
</style>
<style lang="less">
#toolbarViewer{
    padding-right: 20px;

}
.pdfViewer{
    .page{
        border: none !important;
        box-shadow: 0 0 10px 0 #ccc;
    }
}
#thumbnailView{
    padding: 0 35px !important;
    width: 100% !important;
}
#sidebarResizer{//拖动栏
    display: none;
}
#findbar{//搜索框
    background: #fff;
}
#secondaryToolbar{
    background: #fff;
}
#pageActualOption,#pageWidthOption,#customScaleOption,#pageFitOption{
    display: none;
}
#findEntireWord,label.toolbarLabel,#findbarMessageContainer,
#findbarOptionsOneContainer,#cursorSelectTool,#scrollVertical,#scrollHorizontal,
#scrollWrapped,#spreadNone,#spreadOdd,#spreadEven,#documentProperties{//没用的按钮
    display: none;
}
.pdf-app .toolbar{
    z-index: 2000 !important;
}
</style>